<template>
    <el-form :model="formData" :rules="rules" ref="ruleForm">
        <h4 style="text-align: left;margin-left: 7px">模型参数</h4>
        <el-form-item v-for="(value,key) in formData"  :key="key"
                      :label="value.name">
            <div v-if="form_list[key].datatype== 'Integer'">
                <span>
                    <el-input v-model.number="paramsFormData[key]"
                              :placeholder="'请输入'+paramsFormDataDescribe[key]"
                              style="float: left;margin-left: 1%"></el-input>
                </span>
            </div>
            <div v-else>
                <el-input ref="formInput" v-model="paramsFormData[key]"
                          :placeholder="'请输入'+paramsFormDataDescribe[key]"
                          style="float: left;margin-left: 1%"></el-input>
                <span style="float:right;" id="icon">
                     <a @click="openPathSelector"
                        v-if="form_list[key].in>-1||form_list[key].out>-1||form_list[key].Out>-1||form_list[key].In>-1"
                        id={key}>
                        <n3-icon type="file-text" size="large" style="margin-left:-30%"></n3-icon>
                    </a>
                    <a @click="openFilePosition" v-if="form_list[key].in===0 & form_list[key].source==='fs'">
                        <n3-icon type="folder-open" size="large"></n3-icon>
                    </a>
                    <a @click="openPosition" v-if="form_list[key].name.indexOf('空间范围')!==-1">
                        <n3-icon type="map-marker" size="large" style="margin-left:-80%"></n3-icon>
                    </a>
                </span>
            </div>
        </el-form-item>
    </el-form>
</template>

<script>
    export default {
        name: "modelForm",
        data() {
            return {
                rules: {},
                formDataParams: []
            }
        },
        props: {
            formData: {
                type: Array,
                default: function () {
                    return []
                }
            }
        },
        components: {

        },
        methods: {
            openPosition(e) {
                this.$Bus.$emit('positionVisible.v', true);
                let that = this;
                let string = $(e.target).parent().parent().siblings()[0].innerHTML;
                let matchStr = string.match(/请输入([\s\S]*)" /)[1];
                this.$Bus.$on('coordinate', (params) => {
                    for (let i = 0; i <= that.form_list.length; i++) {
                        if (that.form_list[i].description.indexOf(matchStr) !== -1) {
                            that.paramsFormData[i] = params;
                            break;
                        }
                    }
                });
            },
            openFilePosition(e) {
                let that = this;
                this.$Bus.$emit('fileVisible.v', true);
                let string = $(e.target).parent().parent().siblings()[0].innerHTML;
                let matchStr = string.match(/请输入([\s\S]*)" /)[1];
                this.$Bus.$on('fileData', (filePramas) => {
                    for (let i = 0; i <= that.form_list.length; i++) {
                        if (that.form_list[i].description.indexOf(matchStr) !== -1) {
                            that.paramsFormData[i] = filePramas;
                            break;
                        }
                    }
                });
            },
            openPathSelector(e) {
                let that = this;
                this.$Bus.$emit('pathSelectorVisible', true);
                let Str = $(e.target).parent().parent().siblings()[0].innerHTML;
                let matchStr = Str.match(/请输入([\s\S]*)" /)[1];
                let a = 0;
                this.$Bus.$off('path');
                this.$Bus.$on('path', (filePath) => {
                    for (let i = 0; i < that.form_list.length; i++) {
                        if (that.form_list[i].description.indexOf(matchStr) > -1) {
                            that.paramsFormData[i] = filePath;
                            return;
                        }
                    }
                });
            },
            outFileChange(e) {
                let outFileString = $(e.target).parent().parent().siblings()[0].innerHTML;
                let outMatchStr = outFileString.match(/请输入([\s\S]*)" /)[1];
                if (e.target.files.length > 0) {
                    for (let i = 0; i <= this.form_list.length; i++) {
                        if (this.form_list[i].description.indexOf(outMatchStr) !== -1) {
                            this.paramsFormData[i] = e.target.files[0].name;
                            break;
                        }
                    }
                }
            },
            reset() {
                this.$refs["paramsFormData"].resetFields();
            },
            // submit() {
            //     let obj = this;
            //     let random = new Date().getTime();
            //     this.$refs["paramsFormData"].validate((valid) => {
            //         if (valid) {
            //             let modelparamData = {};
            //             let para = [];
            //             for (let i = 0; i < Object.keys(obj.paramsFormData).length - 1; i++) {
            //                 para.push(obj.paramsFormData["" + (i + 1)])
            //             }
            //             modelparamData.params = para;
            //             modelparamData.customname = this.paramsFormData["0"];
            //             this.$axios.post(obj.$URL.useModelUrl + this.artifactId, modelparamData
            //             ).then(function (response) {
            //                 if (response.code === 200) {
            //                     if (obj.page == 'project') {
            //                         obj.$Bus.$emit("jobName", response.body);
            //                         obj.$Bus.$emit("chooseModelVisible", false);
            //                         obj.$message({
            //                             type: 'success',
            //                             message: '模型提交成功!'
            //                         });
            //                     } else {
            //                         obj.$message({
            //                             type: 'success',
            //                             message: '模型提交成功!请前往模型项目查看运行进度！'
            //                         });
            //                     }
            //                 }
            //             }).catch(function (error) {
            //                 obj.$message.error('模型提交失败!');
            //             });
            //             let visible = this.dialogVisible;
            //             visible.v = false;
            //             this.$emit("update:dialogVisible", visible);
            //         } else {
            //             console.log('error submit!!');
            //             return false;
            //         }
            //     })
            // },
            // commit() {
            //     let obj = this;
            //     let random = new Date().getTime().toString();
            //     random = random.substr((random.length - 4));
            //     this.$refs["paramsFormData"].validate((valid) => {
            //         if (valid) {
            //             let para = [];
            //             let paras = {};
            //             for (let i = 0; i < Object.keys(obj.paramsFormData).length; i++) {
            //                 para.push(obj.paramsFormData[(i)] + "");
            //             }
            //             paras.artifactId = obj.artifactId;
            //             paras.taskId = obj.currentItemId;
            //             paras.params = para;
            //             obj.$emit("getGeeParam", paras);
            //             obj.dialogVisible.v = false;
            //             obj.$emit("update:dialogVisible", obj.dialogVisible);
            //             if (obj.formDataParams.length === 0) {
            //                 let form = {};
            //                 form.id = obj.currentItemId;
            //                 form.data = paras.params;
            //                 obj.formDataParams.push(form);
            //             } else {
            //                 for (let formD of obj.formDataParams) {
            //                     if (formD.id == obj.currentItemId) {
            //                         formD.data = paras.params;
            //                     } else {
            //                         let form = {};
            //                         form.id = obj.currentItemId;
            //                         form.data = paras.params;
            //                         obj.formDataParams.push(form);
            //                     }
            //                 }
            //             }
            //         } else {
            //             console.log('error submit!!');
            //             return false;
            //         }
            //     })
            // }
        },
        watch: {
            form_list: {
                handler: function (newValue, oldValue) {
                    let random = new Date().getTime().toString();
                    let shortrandom = random.substr((random.length - 4));
                    this.paramsFormData = {};
                    //非gee页面打开时默认参数修改
                    let pa = ["车辆点对识别" + shortrandom, "/data/dldsj/OdPairDetection", "/czd/output/" + random + "/od-detection", "csv", 0, 1, 2, 3, 4, 10];
                    let ba = ["聚类分析", "/output/task/od-cluster/czd/od-filter_0", "/output/task/od-cluster11/bkmeans_Points", "/output/task/od-cluster11/bkmeans_Clusters", "csv", "2,3", 10, 20, 100];
                    //gee页面打开时默认参数修改
                    let geePa = ["/data/dldsj/OdPairDetection", "/output/task/od-cluster/1541992014636/od-detection_0", "csv", 0, 1, 2, 3, 4, 10];
                    let geeBa = ["/output/task/od-cluster/czd/od-filter_0", "/output/task/od-cluster11/bkmeans_Points", "/output/task/od-cluster11/bkmeans_Clusters", "csv", "2,3", 10, 20, 100];
                    this.paramsFormDataName = {};
                    this.paramsFormDataDescribe = {};
                    this.rules = {};

                    let defaultParamInput = [];


                    let _index = -1;
                    for (let j = 0; j < this.formDataParams.length; j++) {
                        if (this.currentItemId == this.formDataParams[j].id) {
                            _index = j;
                        }
                    }
                    for (let i = 0; i < newValue.length; i++) {
                        let param = i;

                        if (this.artifactId == 'BKmeans') {
                            this.$set(this.paramsFormData, param, ba[i]);
                        } else if (this.artifactId == 'ODPairDetectionVehicle') {
                            this.$set(this.paramsFormData, param, pa[i]);
                        } else {
                            let val = newValue[i].default != null ? newValue[i].default : "";
                            this.$set(this.paramsFormData, param, val);
                        }

                        this.paramsFormDataName[param] = newValue[i].name;
                        this.paramsFormDataDescribe[param] = newValue[i].description;
                        this.rules[param] = [];
                        let ruleMessage = {};
                        let ruleRequire = {};
                        if (newValue[i].datatype === 'Integer') {
                            ruleRequire["type"] = 'number';
                            ruleRequire["message"] = '参数必须为整数值';
                            ruleMessage["required"] = true;
                        } else if (newValue[i].name.indexOf('范围') !== -1) {
                            ruleMessage["required"] = false;
                        } else {
                            ruleRequire["type"] = '';
                            ruleRequire["message"] = '';
                            ruleMessage["required"] = true;
                        }
                        ruleMessage["message"] = '请输入' + newValue[i].name;
                        ruleMessage["trigger"] = 'blur';
                        ruleRequire["trigger"] = 'blur';
                        this.rules[param][0] = ruleMessage;
                        this.rules[param][1] = ruleRequire;
                    }
                }
            }
        }
        ,
        mounted() {
        }
        ,
        created() {

        }
    }
</script>

<style scoped>

</style>